<template>
  <div class="ChannelEdit">
    <van-cell>
      <div slot="title">我的频道</div>
      <van-button
        type="danger"
        plain
        round
        size="mini"
        @click="isEdit = !isEdit"
        >{{ isEdit ? '完成' : '编辑' }}</van-button
      >
    </van-cell>
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        v-for="(value, index) in mychannels"
        :key="index"
        @click="handel(value, index)"
      >
        <van-icon
          slot="icon"
          name="clear"
          v-show="isEdit && !fixchannel.includes(value.id)"
        ></van-icon>
        <span
          slot="text"
          class="van-grid-item__text"
          :class="{ active: active === index }"
          >{{ value.name }}</span
        >
      </van-grid-item>
    </van-grid>
    <van-cell>
      <div slot="title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10" class="van-grid1">
      <van-grid-item
        v-for="(value, index) in recommendChannels"
        :key="index"
        :text="value.name"
        icon="plus"
        @click="addMyChannel(value)"
      />
    </van-grid>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getAllChannels, addUserChannel, deletedUserChannel } from '../../../api/channels'
export default {
  name: 'ChannelEdit',

  data() {
    return {
      allchannels: [],
      isEdit: false,
      fixchannel: [0]
    };
  },
  props: {
    mychannels: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  created() {
    this.getAllChannel()
  },
  mounted() {
  },
  computed: {
    ...mapState(['user']),
    recommendChannels() {
      const channels = []
      this.allchannels.forEach(channel => {
        const result = this.mychannels.find(mychannel => {
          return mychannel.id === channel.id
        })
        if (!result) {
          channels.push(channel)
        }
      })
      return channels
    }
  },
  methods: {
    async getAllChannel() {
      try {
        const { data } = await getAllChannels()
        this.allchannels = data.data.channels
      } catch (error) {
        this.toast('获取推荐频道失败！')
      }
    },
    async addMyChannel(value) {
      this.mychannels.push(value)
      // 数据持久化处理
      if (this.user) {
        //已登录，把数据请求接口放到线上
        try {
          await addUserChannel({
            id: value.id,
            seq: this.mychannels.length
          })
        } catch (error) {
          this.$toast('保存失败！请稍后重试')
        }
      } else {
        //未登录，把数据存储到本地
        window.localStorage.setItem('toutiao_channel', JSON.stringify(this.mychannels))
      }
    },
    handel(value, index) {
      if (this.isEdit) {
        //编辑状态，执行删除频道
        if (this.fixchannel.includes(value.id)) {
          return
        }
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.mychannels.splice(index, 1)
        this.deleteChannel(value.id)
      } else {
        // 非编辑状态，执行切换频道
        this.$emit('update-active', index, false)
      }
    },
    async deleteChannel(id) {
      try {
        if (this.user) {
          // 登录状态，数据存储到线上
          await deletedUserChannel(id)
        } else {
          // 未登录,数据存储到本地
          window.localStorage.setItem('toutiao_channel', JSON.stringify(this.mychannels))
        }
      } catch (error) {
        this.$toast('删除失败！请稍后重试')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.ChannelEdit {
  .van-grid-item {
    width: 180px;
  }
  padding: 85px 0;
  /deep/.van-grid1 {
    .van-grid-item {
      .van-grid-item__content {
        flex-direction: row;
        white-space: nowrap;
        .van-grid-item__icon {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: unset;
        }
      }
    }
  }
  /deep/.my-grid {
    .van-grid-item__icon {
      position: absolute;
      top: 20px;
      right: 15px;
      font-size: 15px;
      color: red;
    }
    .van-grid-item__icon-wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 15px;
      color: red;
    }
    /deep/.van-grid-item__text {
      font-size: 20px;
      margin-top: unset;
    }
    .active {
      color: red;
    }
  }
}
</style>